import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {

  const [messages, setMessages] = useState([
    {id: 1, title: 'message001', content: 'meessage content001'},
    {id: 2, title: 'message002', content: 'meessage content002'},
    {id: 3, title: 'message003', content: 'meessage content003'},
  ])

  // 得到跳转函数
  const navigate = useNavigate()

  return (
    <>
      <ul>
      {
        messages.map(m => (
          <li key={m.id}>
            <Link to={`detail/${m.id}/${m.title}/${m.content}?id2=${m.id}&title2=${m.title}&content2=${m.content}`}
              state={m} replace>{m.title}</Link>
            <button onClick={() => {
              navigate(
                `detail/${m.id}/${m.title}/${m.content}?id2=${m.id}&title2=${m.title}&content2=${m.content}`,
                {
                  state: m,
                  replace: true
                }
              )
            }}>查看详情</button>
          </li>
        ))
      }
    </ul>
    <hr/>
    <Outlet/>
    </>
  )
}
